<template>
  <div>
    <el-card class="box-card" style="height:800px">
      <div slot="header" class="clearfix">
        <span>
          <navigation />
        </span>
      </div>
      <div class="list" id="indicatorsList">
        <el-scrollbar class="page-component__scroll" style="height:100%">
          <div style="height:700px;">
            <el-table
              :header-cell-style="{ background: '#f5f5f5' }"
              :data="tableData"
              style="width: 100%;margin-bottom: 20px;"
              row-key="id"
              border
              height="680px"
              default-expand-all
              :tree-props="{
                children: 'children',
                hasChildren: 'hasChildren'
              }"
            >
              <el-table-column label="序号" width="100" prop="index" align="center">
             </el-table-column>
              <el-table-column
                prop="name"
                label="重点工作名称"
              
              ></el-table-column>
              <el-table-column prop="number" label="全年目标任务量" width="120">
              </el-table-column>
              <el-table-column prop="year" label="年度" width="100">
              </el-table-column>
              <el-table-column label="审核状态" width="140">
                <template slot-scope="scope">{{
                  interPret(scope.row.checkStatus)
                }}</template>
              </el-table-column>
              <el-table-column label="操作时间" width="180">
                <template
                  slot-scope="scope"
                  v-if="scope.row.checkStatus != 0"
                  >{{ timestampToTimes(scope.row.updateTime) }}</template
                >
              </el-table-column>
                <el-table-column prop="auditorName" label="审核人" width="100">
                </el-table-column>
              <el-table-column label="操作" >
                <template slot-scope="scope" >
                  <el-button
                    @click="addPass(scope.row)"
                    type="text"
                    :disabled="scope.row.checkStatus == 2 || scope.row.checkStatus == 0 || scope.row.checkStatus == -1 ?true:false"
                    v-if="!scope.row.children || scope.row.children.length == 0"
                    >通过</el-button
                  >
                  <el-button
                    @click="routerPath(scope.row)"
                    type="text"
                    v-if="!scope.row.children || scope.row.children.length == 0"
                    >目标任务</el-button
                  >
                  <el-button
                    type="text"
                    :disabled="scope.row.reject != true"
                    v-if="!scope.row.children || scope.row.children.length == 0"
                    @click="rejectData(scope.row)"
                    >驳回</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-scrollbar>
      </div>
    </el-card>
    <!-- 驳回提示框 -->
    <el-dialog
      title="驳回理由"
      :visible.sync="dialogVisible"
      width="30%"
      center
    >
      <div>
        <b class="reject">请在下方输入框内输入驳回理由:</b>
        <el-input
          type="textarea"
          :rows="5"
          placeholder="请输入内容"
          v-model="message"
        >
        </el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="upType(-1)">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: "", //驳回原因
      dialogVisible: false,
      tableData: [],
      id: ""
    };
  },
  mounted() {
    this.getListByPage();
  },
  methods: {
    showDisplay(val) {
      if (val.isDisplay == true) {
        if (!val.children || val.children.length == 0) {
          return true;
        } else {
          return false;
        }
      } else {
        return false;
      }
    },
    // 时间转换
    timestampToTimes(timestamp) {
      var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear();
      var M =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      var D = date.getDate() + " ";
      var h = date.getHours() + ":";
      var m = date.getMinutes() + ":";
      var s = date.getSeconds();
      // return Y + M + D;
      let _time = `${Y}年${M}月${D}日`;
      return _time;
    },
    // 查看按钮
    routerPath(val) {
      console.log(val);
      this.$router.push({
        path: "/indicatorsListAudit_2",
        query: {
          taskId: val.id,
          departmentName: val.departmentName,
          number: val.number,
          name:val.name
        }
      });
    },
    // 点击通过
    addPass(val) {
      this.$confirm("此操作将确认文件后不得修改, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "success"
      })
        .then(() => {
          if (val.checkStatus == 2) {
            this.$message({
              message: "警告哦，已经通过的，不能重复提交",
              type: "warning"
            });
            return;
          }
          this.id = val.id;
          this.upType(1);
        })
        .catch(() => {
        });
    },
    // 审核状态
    interPret(val) {
      let _txt = "";
      switch (val) {
        case 0:
          _txt = "未提交";
          break;
        case 1:
          _txt = "待审核";
          break;
        case 2:
          _txt = "已审核";
          break;
        default:
          _txt = "驳回";
      }
      return _txt;
    },
    upType(val) {
      let _obj = {};
      if (val == -1) {
        _obj = {
          taskId: this.id,
          status: val,
          message: this.message
        };
      }
      if (val == 1) {
        _obj = {
          taskId: this.id,
          status: val
        };
      }
      this.$axios
        .post(`/taskCollectionCheckLog/update`, _obj)
        .then(res => {
          if (res.code == 200) {
            console.log(res);
            if (val == -1) {
              this.$message({
                message: "数据更新成功",
                type: "success"
              });
              this.dialogVisible = false;
              this.getListByPage();
            } else {
              this.$message({
                message: "数据更新成功",
                type: "success"
              });
              this.getListByPage();
            }
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 点击列表驳回按钮
    rejectData(val) {
      console.log(val);
      if (val.checkStatus == -1) {
        this.$message({
          message: "警告哦，已经通过的，不能重复提交",
          type: "warning"
        });
        return;
      }
      this.id = val.id;
      this.message = "";
      this.dialogVisible = true;
    },
    // 获取数据列表
    getListByPage() {
      this.$axios
        .post(`/task/getList`)
        .then(res => {
          if (res.code == 200) {
            console.log(res);
            this.tableData = res.data;
            let _taskId = localStorage.getItem("taskId");
            this.tableData.forEach((item, index) => {
              if (_taskId == "null" ||  _taskId == 'undefined') {
                item.isDisplay = true;
                if (item.children || scope.row.children.length != 0) {
                  item.children.forEach((i, index2) => {
                    i.isDisplay = true;
                    i.index = `${index + 1}.${index2 + 1}`;
                  });
                }
                item.index = index + 1;
              } else {
                item.index = index + 1;
                if (item.id == _taskId) {
                  item.isDisplay = true;
                } else {
                  item.isDisplay = false;
                }
              }
            });
            this.tableDataboy = [];
            this.tableDataboy = this.tableData.filter(function(
              element,
              index,
              self
            ) {
              return self.findIndex(el => el.id == element.id) === index;
            });
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>
<style scoped>
.reject {
  height: 30px;
  line-height: 30px;
}
</style>
